<template>
  <div class="goodslist">
    <div class="header">
      <el-button style="width: 100%" type="warning" @click="openCreate">新增</el-button>
    </div>
    <div class="table_auto">
      <el-table :data="tableData" stripe style="width: 100%" height="100%" border>
        <el-table-column prop="goods_img" label="图片" width="180">
          <template #default="{ row }">
            <el-image
              style="width: 100px; height: 100px"
              :src="row.goods_img"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="[row.goods_img]"
              show-progress
              :initial-index="4"
              fit="cover"
            />
          </template>
        </el-table-column>
        <el-table-column prop="goods_name" label="商品名称" />
        <el-table-column prop="goods_price" label="商品价格" width="180" />
        <el-table-column prop="goods_number" label="商品数量" width="180" />
        <el-table-column fixed="right" label="操作">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
            <el-button link type="danger" size="small" @click="deleteGoods(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination_style pagination_auto">
      <el-pagination
        v-model:currentPage="goods_list_form.page"
        :page-size="goods_list_form.pageSize"
        :background="true"
        layout="total, prev, pager, next"
        :total="count"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog v-model="openEditDialog" title="商品编辑" width="40%" @close="close">
      <el-form :model="form">
        <el-form-item label="商品图片" :label-width="140">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:3000/admin/upload_img"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.goods_img" :src="form.goods_img" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品名称" :label-width="140">
          <el-input v-model="form.goods_name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="商品价格" :label-width="140">
          <el-input v-model="form.goods_price" autocomplete="off" />
        </el-form-item>
        <el-form-item label="商品数量" :label-width="140">
          <el-input v-model="form.goods_number" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="sumbit">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import AdminAPI from "@/api/system/admin.api";
import type { UploadProps } from "element-plus";

let goods_list_form = ref({
  page: 1,
  pageSize: 10,
});
let form = reactive({
  gid: "",
  goods_img: "",
  goods_name: "",
  goods_price: "",
  goods_number: "",
});
let count = ref(0);
let tableData = ref([]);
let openEditDialog = ref(false);

async function deleteGoods(row: any) {
  ElMessageBox.confirm("确定删除该商品吗?")
    .then(async () => {
      console.log(row.gid, "ddd");
      let { msg } = await AdminAPI.goodsDelete({ gid: row.gid });
      if (msg == "删除成功") {
        ElMessage.success("删除成功");
        getGoodsList();
      }
    })
    .catch(() => {
      ElMessage("取消操纵");
    });
}

async function sumbit() {
  if (form.gid) {
    let { msg } = await AdminAPI.goodsUpdate(form);
    if (msg == "修改成功") {
      ElMessage.success("修改成功");
      getGoodsList();
      close();
    }
  } else {
    let { msg } = await AdminAPI.goodsCreate(form);
    if (msg == "新增商品成功") {
      ElMessage.success("新增商品成功");
      getGoodsList();
      close();
    }
  }
}

function openCreate() {
  openEditDialog.value = true;
}

function openEdit(row: any) {
  form.gid = row.gid;
  form.goods_img = row.goods_img;
  form.goods_name = row.goods_name;
  form.goods_price = row.goods_price;
  form.goods_number = row.goods_number;
  openEditDialog.value = true;
}

function close() {
  resetForm();
  openEditDialog.value = false;
}

function resetForm() {
  form.gid = "";
  form.goods_img = "";
  form.goods_name = "";
  form.goods_price = "";
  form.goods_number = "";
}

async function getGoodsList() {
  let res = await AdminAPI.goodsList({ ...goods_list_form.value });
  count.value = res.total;
  tableData.value = res.rows;
}

const handleAvatarSuccess: UploadProps["onSuccess"] = (response, uploadFile) => {
  if (response.code == 200) {
    form.goods_img = response.picUrl;
  } else {
    ElMessage.error("上传图片失败请重试");
  }
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("文件格式必须是jpg格式");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("图片大小不能超过2M");
    return false;
  }
  return true;
};

function handleSizeChange() {
  getGoodsList();
}

function handleCurrentChange() {
  getGoodsList();
}

onMounted(() => {
  getGoodsList();
});
</script>

<style lang="scss" scoped>
.goodslist {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  margin: 5px 0;
  width: 100px;
  padding-left: 10px;
}
.table_auto {
  min-height: 0;
  flex: 1 1 auto;
}
.pagination_style {
  padding: 10px;
  background: #fff;
}
.pagination_auto {
  flex: none;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
